<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title th:text="@{(${articleInfo.title})} + ' - 赛马牛的博客'"></title>
    <!--移动端设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta property="qc:admins" content="171255133211636" />
    <meta name="keywords" content="赛马牛的博客,赛马牛,博客,技术博客,个人博客,blog" />
    <meta name="description" content="赛马牛的博客，分享个人生活、理想和技术的博客" />
    <meta name="author" content="赛马牛,Dennis Wong,1656239759@qq.com">

    <link rel="stylesheet" href="/static/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/static/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>

    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/index.js" type="text/javascript" charset="utf-8" defer="defer"></script>

    <style>
        .b-page {
            background: #fff;
            box-shadow: 0px 1px 2px 0px #E2E2E2;
        }
        .page {
            width: 100%;
            padding-bottom: 20px;
            /*padding: 30px 15px;*/
            /*background: #FFF;*/
            text-align: right;
            overflow: hidden;
        }
        .page .first,
        .page .prev,
        .page .current,
        .page .num,
        .page .current,
        .page .next,
        .page .end {
            padding: 8px 16px;
            margin: 0px 5px;
            display: inline-block;
            color: #D9534F;
            border: 1px solid #F2F2F2;
            border-radius: 5px;
        }
        .page .first:hover,
        .page .prev:hover,
        .page .current:hover,
        .page .num:hover,
        .page .current:hover,
        .page .next:hover,
        .page .end:hover {
            text-decoration: none;
            /*background: #BF3B37;*/
            /*color: #fff;*/
            font-weight: 800;
        }
        .page .current {
            background-color: #D9534F;
            color: #FFF;
            border-radius: 5px;
            border: 1px solid #D9534F;
        }
        .page .current:hover {
            text-decoration: none;
            background: #D9534F;
            font-weight: 400;
        }
        .page .not-allowed {
            cursor: not-allowed;
        }
        #to-top{
            text-align: center;
            display: none;
            width: 50px;
            height: 50px;
            /*background: url('images/to-top.png') no-repeat;*/
            background: #D9534F;
            border-radius: 50%;
            position: fixed;
            bottom: 50px;
            right: 50px;
            transition: all 1s;
            -webkit-transition:all 1s;
            -moz-transition:all 1s;
            -o-transition:all 1s;
            cursor: pointer;
        }
        #to-top .to-top{
            font-weight: 600;
            line-height: 48px;
            font-size: 40px;
        }
        #to-top:hover{
            /*transform: rotateY(360deg);
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);*/
            opacity: .7;
        }
        pre {
            background-color: #2a2c31;
            padding: 20px;
            color: #18e1af;
            border-radius: 6px;
            margin: 10px 0;
            position: relative;
            cursor: pointer;
            overflow-x: auto;
        }
        .clone-box
        {
            display: none;
        }
        .copy-box {
            position: absolute;
            right: 5px;
            top: 0;
            width: 50px;
            margin: 0;
            padding: 0;
            text-align: center;
            height: 28px;
            line-height: 28px;
            display: none;
        }
    </style>
</head>
<body>
<!--头部-->
<script type="text/javascript">
    $(function () {
        $('main').css({'margin-top' : $('header').height() + 'px'});
    })
</script>
<header>
    <div class="w100">
        <nav>
            <div class="container nav-box">
                <div id="logo">
                    <a href="/" style="display: flex;"><img src="/static/images/logo.png" alt="" /></a>
                </div>
                <ul class="big-nav">
                    <li th:class="${categoryId == 0} ? 'bg-red'">
                        <a href="/">首页</a>
                    </li>
                    <li th:each="item,key:${categoryList}" th:style="${key.index > 10} ? 'display: none;'" th:class="${categoryId == item.id} ? 'bg-red'">
                        <a th:href="'/?c=' + @{(${item.id})}" th:text="${item.title}"></a>
                    </li>
                </ul>

                <div class="nav-toggle">
                    <i class="icon iconfont">&#xe696;</i>
                </div>
            </div>
            <div class="nav-display-box">
                <ul class="first-ul">
                    <li th:class="${categoryId == 0} ? 'bg-red'">
                        <a href="/">首页</a>
                    </li>

                    <li th:each="item,key:${categoryList}" th:style="${key.index > 10} ? 'display: none;'" th:class="${categoryId == item.id} ? 'bg-red'">
                        <a th:href="'/?c=' + @{(${item.id})}" th:text="${item.title}"></a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
</header>
<!--头部结束-->


<!--主体-->
<main>
    <div class="container">
        <!--文章-->
        <div class="w66 left">
            <article>
                <div class="article">

                    <!-- 首页文章 -->
                    <block name="index_art">
                        <div class="border">
                            <section>
                                <h1 th:text="${articleInfo.title}"></h1>
                                <div class="tips">
                                            <span class="btn-black btn tip">
                                                <i class="icon iconfont">&#xe6c5;</i>
                                                <a th:href="@{/(l=${articleInfo.label_id})}" target="_block" th:text="${articleInfo.label_title}"></a>
                                            </span>
                                    <span class="con-time" style="padding: 0 10px;" th:text="'发表时间：' + @{(${articleInfo.create_at})}"></span>
                                    <span class="con-author">作者：赛马牛</span>
                                    <!--  <span class="con-click" style="padding-left: 10px;">浏览次数：58</span> -->
                                </div>
                                <div class="box-content">
                                    <p class="content arc" th:utext="${articleInfo.content}"></p>
                                </div>
                            </section>
                        </div>
                    </block>
                </div>
            </article>
        </div>
        <!--文章结束-->
        <!--右侧-->
        <div class="right w33">
            <asid>
                <div class="">
                    <!--标签-->
                    <div class="border tags-cloud">
                        <section>
                            <ul class="nav-pills">
                                <li><a href="javascript:;">最新文章</a></li>
                            </ul>
                            <div class="bottom">
                                <div id="" class="tags-cloud-show link">
                                    <ul>
                                        <li th:each="item:${newestSixArticleList.list}">
                                            <a th:if="${item.type == 1}" th:href="'/detail?id=' + ${item.id}" target="_block" th:text="${item.title}"></a>
                                            <a th:if="${item.type == 2}" th:href="${item.link}" target="_block" th:text="${item.title}"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </section>
                    </div>
                    <!--标签结束-->
                    <!--标签-->
                    <div class="border tags-cloud">
                        <section>
                            <ul class="nav-pills">
                                <li><a href="javascript:;">热门标签</a></li>
                            </ul>
                            <div class="bottom">
                                <div id="" class="tags-cloud-show tag">

                                    <a th:each="item:${recommendLabelList}" th:href="'/?l=' + @{(${item.id})}" class="btn btn-read" style="font-size:12px;margin-right:20px;margin-bottom:10px;" th:text="@{(${item.title})} + '(' + @{(${item.article_count})} + ')'"></a>

                                </div>
                            </div>
                        </section>
                    </div>
                    <!--标签结束-->
                    <!--友情链接-->
                    <div class="border tags-cloud">
                        <section>
                            <ul class="nav-pills">
                                <li><a href="javascript:;">友情链接</a></li>
                            </ul>
                            <div class="bottom">
                                <div id="" class="tags-cloud-show link">
                                    <ul>
                                        <li th:each="item:${friendsLinkList}"><a th:href="${item.link}" target="_block" th:text="${item.name}"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </section>
                    </div>
                    <!--友情链接结束-->
                </div>
            </asid>
        </div>
        <!--右侧结束-->
    </div>
    <!--复制拷贝框-->
    <div class="clone-box">
        <div class="copy-box">
            复制
        </div>
    </div>
</main>
<!--主体结束-->
<div th:replace="client/common/footer::footer"></div>
<script>
    $(window).ready(function() {
        $('pre').each((index, item) => {
            $('pre').eq(index).append('<div class="copy-box">点击复制</div>');
        })
        if ($('footer').offset().top < $(window).height()) {
            $('footer').addClass('footer-to-low');
        }
    })
    $('pre').mousemove(function () {
        $(this).find('.copy-box').show();
    }).mouseout(function () {
        $(this).find('.copy-box').hide();
    }).click(function() {
        // 获取光标当前选中数据
        let currentSelect = getCurrentSelect();
        if(currentSelect.text.trim() == ''){
            let copyTempText = document.createElement("textarea");
            copyTempText.value = $(this).find('code').text();
            document.body.appendChild(copyTempText);
            copyTempText.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            copyTempText.remove(); // 移除临时表单
            $(this).find('.copy-box').text('复制成功');
            let that = this;
            setTimeout(function() {
                $(that).find('.copy-box').text('点击复制');
            }, 2000)
        }
    });

    function getCurrentSelect(){

        let selectionObj = null, rangeObj = null;
        let selectedText = "", selectedHtml = "";
        try{
            // 处理兼容性
            if(window.getSelection){
                // 现代浏览器
                // 获取text
                selectionObj = window.getSelection();
                selectedText = selectionObj.toString();

                //  获取html
                rangeObj = selectionObj.getRangeAt(0);
                var docFragment = rangeObj.cloneContents();
                var tempDiv = document.createElement("div");
                tempDiv.appendChild(docFragment);
                selectedHtml = tempDiv.innerHTML;
            } else if(document.selection){
                // 非主流浏览器IE
                selectionObj = document.selection;
                rangeObj = selectionObj.createRange();
                selectedText = rangeObj.text;
                selectedHtml = rangeObj.htmlText;
            }
        }catch (e){

        }

        return {
            text: selectedText,
            html: selectedHtml
        }
    }
</script>
</body>
</html>